import ReactDom from 'react-dom';
import { Provider } from "react-redux";
import { ConnectedRouter } from 'connected-react-router';
import { RouteConfig, renderRoutes } from 'react-router-config';
import { loadableReady } from '@loadable/component';

import createStore from '../store';
import routes from '../routes';

const initialState = window.__INITIAL_STATE__;
const { store,history } = createStore({ initialState })
const props = {
    history: history,
}

const render = (Routes: RouteConfig[]) => 
    ReactDom.hydrate(
        <Provider store={ store }>
            <ConnectedRouter {...props}>{ renderRoutes(Routes) }</ConnectedRouter>
        </Provider>
        document.getElementById('react-view'),
    );

loadableReady(()=> render(routes as RouteConfig[]))

if(module.hot) module.hot.accept()